<template>
  <div class="login">
    <van-nav-bar
      right-text="去注册"
      left-arrow
      fixed
      placeholder
      :border="false"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="loginform">
      <div class="l-f-title"><b>密码登录</b><a>忘记密码</a></div>
      <van-cell-group inset>
        <van-field
          v-model="tel"
          left-icon="arrow-down"
          label="+86"
          maxlength="11"
          type="number"
          :clearable="true"
        >
        </van-field>
        <van-field
          v-model="password"
          :type="type"
          placeholder="请输入密码"
          :clearable="true"
          maxlength="14"
        >
          <template #right-icon>
            <van-icon :name="icont" @click="chengtype"></van-icon>
          </template>
        </van-field>
        <div>
          <van-button
            round
            block
            color="#FFD102"
            native-type="button"
            @click="loginbtn"
          >
            登 录
          </van-button>
        </div>
        <div class="xieyi">
          <p>
            <span>登录即表面阅读并同意</span>&nbsp;&nbsp;<a
              is-link
              @click="showPopup"
              >用户协议</a
            >&nbsp;&nbsp;<a is-link @click="showPopup">隐私政策</a>
          </p>
          <van-popup
            v-model:show="show"
            position="left"
            :style="{ height: '100%', width: '100%' }"
            closeable
            close-icon-position="top-left"
            close-icon="arrow-left"
          >
            <van-nav-bar fixed placeholder :border="false" />
            <div class="yinsitiaokuan">
              <h3>隐私条款</h3>
              <p>
                樊登读书非常重视对您的个人隐私保护，有时候我们需要某些信息才能为您提供您请求的服务，本隐私政策解释了这些情况下的数据收集和使用情况。
              </p>
              <p>
                本政策适用于樊登读书的所有相关服务，随着樊登读书服务范围的扩大，隐私政策的内容可由樊登读书随时更新，且毋须另行通知。更新后的隐私政策一旦在网页上公布即有效代替原来的隐私政策。
                我们收集哪些信息
              </p>
              <p>
                通常，您能在匿名的状态下访问樊登读书并获取信息。当我们需要能识别您的个人信息或者可以与您联系的信息时，我们会征求您的同意。
              </p>
              <p>
                通常，在您注册樊登读书或申请开通新的功能时，我们可能收集这些信息：
              </p>
              <p>
                姓名、E-mail地址、住址和电话号码，并征求您的确认。
                关于您的个人信息樊登读书严格保护您个人信息的安全。
              </p>
              <p>
                我们使用各种安全技术和程序来保护您的个人信息不被未经授权的访问、使用或泄漏。
                樊登读书会在法律要求或符合樊登读书的相关服务条款、软件许可使用协议约定的情况下透露您的个人信息，或者有充分理由相信必须这样做才能：
              </p>
              <p>
                (a)满足法律或行政法规的明文规定，或者符合樊登读书站适用的法律程序；
                (b)符合樊登读书相关服务条款、软件许可使用协议的约定；
                (c)保护樊登读书的权利或财产；
                (d)在紧急情况下保护樊登读书员工、樊登读书产品或服务的用户或大众的个人安全；
              </p>
              <p>
                樊登读书不会未经您的允许将这些信息与第三方共享，本政策已经列出的上述情况除外。
                Cookie的使用 使用 Cookie
              </p>
              <p>
                能帮助您实现您的联机体验的个性化，您可以接受或拒绝 Cookie
                ，大多数 Web 浏览器会自动接受
              </p>
              <p>
                Cookie，但您通常可根据自己的需要来修改浏览器的设置以拒绝
                Cookie。 樊登读书有时会使用 Cookie
              </p>
              <p>
                以便知道哪些网站受欢迎，使您在访问樊登读书时能得到更好的服务。Cookie不会跟踪个人信息。
                当您注册樊登读书时，樊登读书亦会使用
              </p>
              <p>
                Cookie。在这种情况下，樊登读书会收集并存储有用信息，当您再次访问樊登读书时，我们可辨认您的身份。来自樊登读书的
              </p>
              <p>
                Cookie 只能被樊登读书读取。 如果您的浏览器被设置为拒绝
                Cookie，您仍然能够访问樊登读书的大多数网页。
              </p>
            </div>
          </van-popup>
        </div>
      </van-cell-group>
    </div>
    <div class="bottom" @click="failtoast">
      <van-button round block color="#F7F5F5" native-type="button">
        <van-icon name="wechat" /> 微信登录
      </van-button>
      <p @click="failtoast">
        <img
          src="https://i.loli.net/2021/07/18/9WtKrm1Xadijfon.png"
          alt=""
        /><img
          src="https://i.loli.net/2021/07/18/KsurWdtwImQp3yn.png"
          alt=""
        /><img src="https://i.loli.net/2021/07/18/e4KzadkTmijnQcv.png" alt="" />
      </p>
    </div>
  </div>
</template>
<script>
import { ref, onBeforeMount } from "vue";
import { useRouter, useRoute } from "vue-router";
// import {  } from "vue-route";
import { postLoginApi } from "../utils/loginapi";
import { Dialog, Toast } from "vant";
export default {
  setup() {
    const tel = ref("");
    const password = ref("");
    const $route = useRoute();
    onBeforeMount(() => {
      tel.value = $route.query.tel || "";
    });
    // 隐私政策弹窗
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    // 路由跳转
    const $router = useRouter();
    const onClickLeft = () => {
      $router.replace("/home");
    };
    const onClickRight = () => {
      $router.replace("/registry");
    };
    //事件函数
    // 改变密码显示
    const type = ref("password");
    const icont = ref("closed-eye");
    const chengtype = () => {
      type.value = type.value === "text" ? "password" : "text";
      icont.value = icont.value === "eye-o" ? "closed-eye" : "eye-o";
    };
    // 点击登录按钮判断提交内容是否有误
    const loginbtn = () => {
      postLoginApi({ usertel: tel.value, password: password.value }).then(
        (res) => {
          switch (res.status) {
            case 1:
              $router.replace("/home");
              localStorage.setItem("token", tel.value);
              break;
            case 0:
              Toast("用户或者密码不能为空");
              break;
            case 3:
              Toast("密码错误");
              break;
            case 4:
              Dialog.confirm({
                title: "手机号码不存在",
                message: "现在去注册吧",
              }).then(() => {
                $router.push("/Registry");
              });
              break;
          }
        }
      );
    };
    const failtoast = () => {
      Toast("暂不支持");
    };
    return {
      tel,
      password,
      show,
      showPopup,
      onClickLeft,
      loginbtn,
      chengtype,
      failtoast,
      onClickRight,
      type,
      icont,
    };
  },
};
</script>

<style lang="less">
:root {
  --van-nav-bar-icon-color: #000;
  --van-nav-bar-arrow-size: 15px;
}
.login .loginform .van-cell-group .van-field .password {
  font-size: 40px !important;
}
.login {
  .van-nav-bar__right {
    .van-nav-bar__text {
      width: 70px;
      height: 13px;
      line-height: 13px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }
    .van-icon {
      color: #000 !important;
    }
  }
  .loginform {
    padding: 0 28px;
    .l-f-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      b {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      a {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #4e85d9;
      }
    }
    // 手机号和密码表单外层盒子
    .van-cell-group {
      margin: 0;
      .van-field {
        height: 48px;
        border-bottom: 1px solid #e2e1e0;
        padding: 20px 0 0 0;
        .van-field__control {
          font-size: 14px;
          font-family: Arial;
          font-weight: bold;
          color: #333333;
        }
      }
      .van-field__label {
        width: 48px;
        height: 10px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
      }
      .van-button--default {
        width: 323px;
        height: 40px;
        border-radius: 20px;
        margin-top: 34px;
      }
      .van-button {
        width: 100%;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #fff !important;
      }
    }
  }
  .xieyi {
    text-align: center;
    font-size: 9px;
    margin-top: 25px;
    span {
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #9d9d9d;
    }
    a {
      font-family: PingFangSC;
      font-weight: 400;
      color: #408ce2;
      text-decoration: underline;
    }
    .yinsitiaokuan {
      padding: 0 10px;
      color: #9d9d9d;
      p {
        height: auto;
        line-height: 20px;
        text-align: left;
        text-indent: 2em;
      }
    }
  }
  .bottom {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    .van-button {
      width: 322px;
      font-size: 16px;
      font-family: PingFangSC;
      font-weight: 400;
      color: #2c2c2c !important;
    }
    p {
      font-size: 14px;
      margin: 30px 0;
      display: flex;
      justify-content: space-between;
      img {
        height: 18px;
      }
    }
  }
}
</style>
